<template>
	<view>
		<u-navbar :title="$t('我的团队')">
			<view class="righttit" slot="right" @click="$.to('/pagesA/pages/my/yaoqing')">
				{{$t('邀请好友')}}
			</view>
		</u-navbar>
		<view class="wrap">
			<view class="chengyuan">
				<view class="yi">{{$t('团队成员')}}：<text>{{ renNum }}</text>{{$t('人')}}</view>
				<view class="yaoNum">{{$t('邀请码')}}：{{ num }}</view>
			</view>

			<u-tabs :list="list" active-color="#10B0B0" bg-color="" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
			<view class="box" v-if="!show">
				<view class="list" v-for="(item, idx) in dataList" :key="idx">
					<image :src="item.image" mode=""></image>
					<view class="nickname">
						{{ item.nickname }}
					</view>
					<view class="xf_num">
						{{$t('累计消费')}}:{{$t('¥')}}{{ item.consumption }}{{$t('元')}}
					</view>
				</view>
			</view>
			<u-empty :text="$t('暂无成员')" margin-top="200" mode="list" v-show="show"></u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: this.$t('一级成员'),
					type: 1,
				},
				{
					name: this.$t('二级成员'),
					type: 2,
				},
				// {
				// 	name: '三级成员',
				// 	type: 3,
				// }
			],
			current: 0,
			show: false,
			num: '',
			renNum: 0,
			dataList: [],
			page: 1,
		}
	},
	onLoad() {
		if (uni.getStorageSync("user")) {
			this.getData(1)
			this.num = uni.getStorageSync("user").share_ma
		}
	},
	onShow() {
		if (!uni.getStorageSync("user")) {
			uni.redirectTo({
				url:'/pages/my/login'
			})
		}
	},
	// 触底
	onReachBottom() {
		if (this.dataList.length < this.page * 10) {
			return
		}
		var type = this.list[this.current].type
		this.page++;
		this.getData(type)
	},
	methods: {
		getData(type) {
			this.$http({
				url: "/api/member/get_my_team",
				data: {
					type: type,
					page: 1,
				}
			}).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					if (res.data.data.count == 0) {
						this.show = true
					} else {
						this.show = false
					}
					var data = res.data.data.list;
					this.dataList = this.dataList.concat(data);
					console.log(this.dataList, 'this.dataList')
					this.renNum = res.data.data.count
				} else {
					this.show = true
				}

			}).catch(err => { });
		},
		change(index) {
			this.current = index;
			this.dataList = [];
			this.page = 1;
			var type = this.list[index].type
			this.getData(type);
		},

	}
}
</script>

<style>
page {
	background-color: #EDF5F5;
}

.righttit {
	margin-right: 20rpx;
}

.wrap {
	padding: 0 20rpx;
	box-sizing: border-box;
	padding-bottom: constant(safe-area-inset-bottom);
	/* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom);
	/* 兼容 iOS >= 11.2 */
}

.chengyuan {
	background: url('https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tuanduiBg.jpg') no-repeat;
	width: 710rpx;
	height: 190rpx;
	background-size: 710rpx 192rpx;
	border-radius: 16rpx;
	margin: 20rpx 0;
	color: #fff;
	text-align: center;
	padding-top: 2rpx;
}

.chengyuan .yi {
	margin-top: 40rpx;
}

.chengyuan text {
	font-size: 38rpx;
}

.chengyuan .yaoNum {
	margin-top: 20rpx;
}

.list {
	display: flex;
	align-items: center;
}

.list image {}

.list .nickname {
	width: 230rpx;
}

.list .xf_num {
	font-size: 26rpx;
	flex: 1;
	margin-right: 10rpx;
	text-align: right;
}

.box {
	margin: 20rpx 0;
	border-radius: 16rpx;
	background-color: #fff;
	padding: 1rpx 20rpx;
	box-sizing: border-box;
}

.box .list {
	margin: 20rpx 0;
}

.box .list image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 20rpx;
}
</style>
